<template>
  <div v-title="'支付结算 - 世外生活运营平台'" class="MkWithdrawDeposit">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData" ></mk-breadcrumb>

    <el-tabs v-model="activeName" class=" globalTabsStyle">

      <el-tab-pane label="待处理" name="pending">
        <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
        <mk-withdraw-wait :active-name="activeName"></mk-withdraw-wait>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="全部" name="all">
        <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightBig)+'px'}]">
        <mk-withdraw-all :active-name="activeName"></mk-withdraw-all>
        </el-scrollbar>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import MkWithdrawWait from './MkWithdrawWait.vue'
  import MkWithdrawAll from './MkWithdrawAll.vue'
  import {mapState} from 'vuex'
  export default {
    name: 'withdrawDeposit',

    components: {
      MkBreadcrumb, MkWithdrawWait,MkWithdrawAll
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightBig: state => state.global.fixedHeightBig
    }),
    data () {
      return {
        activeName: 'pending',
        breadcrumbData: {
          list: [
           {
              name: '支付结算', path: null, clickAble: false
            },{
              name: '提现申请', path: null, clickAble: false
            },
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'pay-icon',
        }
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
    .MkWithdrawDeposit {
      .breadcrumb-box{
        -moz-box-shadow:none;
        -webkit-box-shadow: none;
        -ms-box-shadow: none;
        -o-box-shadow: none;
      }
    }
  .withdraw-list {
    .separator-icon {
      padding: 0 5px;
      color: @fontColorThree
    }
    .tabContainer{
      padding-top:30px;
    }
    .total-box {
      margin-bottom: 10px;
    }
    .total-item {
      height: 150px;
      background-color: #faf9f9;
      padding-left: 40px;
    }
    .total-num {
      padding-top: 30px;
      font-size: 32px;
      color: @fontColorOne;
    }
    .total-name {
      padding-top: 10px;
      font-size: 18px;
      color: @fontColorThree;
    }
    .handle-btn {
      padding: 0 10px;
      &:hover {
        .my-opacity(0.8);
      }
    }
  }
</style>
